<!DOCTYPE html>
<html>
<head>
	<title>绘制镂空的正方形</title>
	<style type="text/css">
		canvas{
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script type="text/javascript">
var myCanvas = document.querySelector('canvas');
var ctx = myCanvas.getContext('2d');

ctx.moveTo(100,100);
ctx.lineTo(300,100);
ctx.lineTo(300,300);
ctx.lineTo(100,300);
ctx.closePath();


ctx.moveTo(150,150);
ctx.lineTo(150,250);
ctx.lineTo(250,250);
ctx.lineTo(250,150);
ctx.closePath();

// ctx.lineWidth = 10;
ctx.fillStyle = 'red';
ctx.fill();
// ctx.stroke();
// 在填充的时候会遵循非零环绕规则

</script>
</body>
</html>